<template>
  <div class="card-wk">
    <ul>
      <li v-for="(item,i) in dataList" :key="item.name+i">
        <div class="card-list-top">
          <img :src="require('@/assets/images/import/'+item.img+'.png')" alt="">
          <div class="card-list-description">
            <h4>{{ item.name }}</h4>
            <p>{{ item.desc }}</p>
          </div>
        </div>
        <div class="card-list-btn">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(item,i)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(item,i)"
          >删除
          </el-button>
        </div>
      </li>
      <span></span>
      <span></span>
      <span></span>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'styleType',
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleUpdate(obj,i) {
      this.$emit('handleUpdate',{object:obj,index:i})
    },
    handleDelete(obj,i) {
      this.$emit('handleDelete',{object:obj,index:i})
    }
  }
}
</script>

<style scoped lang="scss">
h4, p {
  margin: 0;
  font-size: 14px;
}

@mixin flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

// 列表类型
.card-wk {
  ul {
    @include flex;
    padding:0 !important;
    li {
      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, .15);
      width: calc(20% - 20px);
      min-width:210px;
      list-style: none;
      margin: 10px 0;
      padding:0 !important;
      &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5){
        margin-top:0 !important;
      }
      .card-list-top {
        @include flex;
        padding: 20px 10px;
        align-items: center;
        flex-wrap: nowrap;
        .card-list-description {
          margin-left: 10px;
          flex: 1;
          line-height:30px;
          p {
            color: rgba(0, 0, 0, 0.45);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }

      .card-list-btn {
        display:flex;
        border-top: 1px solid rgba(0, 0, 0, .15);
        button{
          flex:1;
          width:50%;
          display: inline-block;
          height:40px;
          color:rgba(0,0,0,0.45);
          &:nth-of-type(1){
            border-right:1px solid rgba(0,0,0,.08);
          }
          &:hover{
           color:#4B6EEF;
          }
        }
      }
    }
    >span{
      width: calc(20% - 20px);
    }
  }
}
</style>
